* {
    padding: 0;
    margin : 0;
}

.page {
    font-size      : 16px;
    display        : flex;
    justify-content: space-between;
    box-sizing     : border-box;
    height         : 100vh;
}

@supports (-webkit-touch-callout: none) {
    .page {
      height: -webkit-fill-available;
    }
  }

.contentContainer {
    overflow: auto;
}

.mainFooter {
    font-size      : smaller;
    min-height     : 8vh;
    border-top     : 1px solid @border-color-base;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.mainContainer {
    overflow        : auto;
    display        : flex;
    flex-direction  : column;
    flex            : 1;
    justify-content: space-between;
    height         : 100%;
}

// 移动端
@media (max-width:768px) {
    .page {
        flex-direction: column;
    }

    .leftBox {
        display: none;
    }

    .mainContainer {
        max-width     : 100%;
        flex-direction: column;
    }

    .mobileHeader {
        height: 64px;
    }

    .ant-menu-horizontal {
        line-height: 64px;
    }

    .mainFooter {
        display        : flex;
        align-items    : center;
        justify-content: center;
    }
}

//使用媒体查询（问题是所有组件的样式都需要写，之后准备采用不同宽度渲染不同组件解决） 组件才引入less
@media(min-width:768px) {

    .mobileHeader {
        display: none;
    }

    .leftBox {
        width       : 18%;
        height      : 100%;
        overflow    : auto;
        border-right: 1px solid @border-color-base;
    }

    .page {
        display        : flex;
        justify-content: space-between;
        box-sizing     : border-box;
        height         : 100vh;
    }

    .mainContainer {
        width: 82%;
    }
}